::selection {
  background: transparent;
}

#input .CodeMirror-code pre.CodeMirror-line {
  font-size: 16px;
  font-weight: 500;

  font-family: "Source Code Variable", "Noto Serif SC", "PingFangTC-light", serif;
}

#input .cm-s-django .cm-header-1,
#input .cm-s-django .cm-header-2,
#input .cm-s-django .cm-header-3,
#input .cm-s-easymde .cm-header-1,
#input .cm-s-easymde .cm-header-2,
#input .cm-s-easymde .cm-header-3 {
  font-family: "Noto Serif SC", serif;
}

#input .cm-s-easymde .cm-link {
  color: #1abc9c;
}

#input .CodeMirror .cm-variable-2 {
  color: #040507;
  font-weight: bold;
  font-family: "FZNewShuSong_GB18030-Z10", serif;
}

#input .CodeMirror .cm-variable-3 {
  color: #0a5438;
  font-size: 95%;
}


.CodeMirror div.CodeMirror-cursor {
  border-left: 2px solid #0b85f3;
}

.header {
  height: 22px;
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.far {
  height: 22px;
  width: 22px;
}

#phodit-editor {
  height: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

#phodit-editor.row {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.row {
  position: absolute;
}

.row .column {
  padding: 0;
  margin: 0;
}

textarea#input {
  border-radius: 0;
  padding: 1.5em;
  font-size: 14px;
  resize: horizontal; /* user can resize vertically, but width is fixed */
}

#input {
  width: 100vw;
  height: calc(100vh - 22px);
}

#tree-view .tree,
#tree-view {
  background: #384452;
}

#tree-view .m-node .inner {
  color: #d1d8df;
}

#input .editor-toolbar a,
#input .editor-toolbar button {
  color: #384452 !important;
}

#input-section {
  height: calc(100vh - 22px);
  max-height: calc(100vh - 22px);
  overflow-y: scroll
}

.CodeMirror-dialog.CodeMirror-dialog-top {
  z-index: 12;
  position: absolute;
  bottom: 30px;
  width: 100vw;
  border-top: 1px solid #d1d8df;
  background: #fff;
}

#input .ace_search_form,
#input .ace_replace_form {
  border: none;
  border-radius: 0;
}

#input .ace_search_form {
  padding-right: 2em;
}

#input .ace_search.right {
  bottom: 0;
  top: inherit;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: 1px solid #d1d8df;
  background-color: #fdfdfd;
}

#output {
  padding: 1em;
  height: 100%;
  max-height: 100%;
  overflow-y: scroll;
}

#input .editor-toolbar {
  position: fixed;
  opacity: 1;
  background: #fdfdfd;
  z-index: 2;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #d1d8df;
  padding: 0 5px;
  top: -1px;
}

#input .editor-toolbar.fullscreen {
  padding-top: 10px;
}

#input .CodeMirror.CodeMirror-fullscreen {
  top: 49px;
}

#input .editor-toolbar.fullscreen:after,
#input .editor-toolbar:before,
#input .editor-toolbar:after {
  margin: 0;
}

#input .CodeMirror {
  font-size: 14px;
  top: 29px;
  position: relative;
  height: calc(100% - 30px);
  border-radius: 0;
  padding: 5px;
}

#input .editor-statusbar {
  padding: 2px 10px;
  width: 100%;
  left: 0;
  bottom: 0;
  position: fixed;
  background: #fdfdfd;
  border-top: 1px solid #d1d8df;
  height: 22px;
  z-index: 9;
}

#input .editor-statusbar span.cursor {
  float: left;
  margin-left: 0;
  min-width: auto;
}

#tree-view .tree {
  width: 100%;
  padding-left: 10px;
}

#input .editor-preview-side {
  top: 33px;
}

#input.full-screen .editor-preview-side.editor-preview-active-side {
  top: 49px;
  border-left: 1px solid #d1d8df;
}

#input .editor-preview-side.editor-preview-active-side {
  top: 32px;
  border-left: none;
}

#input .editor-preview-side pre > code {
  font-size: 12px;
  padding: 0;
}

#terminal-section {
  position: absolute;
  width: 100%;
  right: 0;
  bottom: 21px;
  z-index: 9;
}

p {
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 15px;
}

pre.prettyprint {
  border: none;
  border-left: 0.3rem solid #1abc9c !important;
}

figure {
  margin: 0;
}

blockquote, dl, figure, form, ol, p, pre, table, ul {
  margin-bottom: 16px;
}

li p {
  display: inline-block;
  margin: 0;
}

interact-bar {
  background: #d1d8df;
  z-index: 999;
  position: fixed;
  width: 100%;
  bottom: 22px;
  left: 0;
}

.CodeMirror-line > span > .cm-quote:first-child {
  border-left: 0.3rem solid #1abc9c;
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
}

/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
  width: 8px; /* 1px wider than Lion. */
  /* This is more usable for users trying to click it. */
  background-color: rgba(0, 0, 0, 0);
  -webkit-border-radius: 100px;
}

/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, 0.09);
}

/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
  /* This is the EXACT color of Mac OS scrollbars.
     Yes, I pulled out digital color meter */
  background: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 100px;
}

::-webkit-scrollbar-thumb:vertical:active {
  background: rgba(0, 0, 0, 0.61); /* Some darker color when you click it */
  -webkit-border-radius: 100px;
}

#input .CodeMirror {
  color: #384452;
}

.CodeMirror pre {
  font-size: 12px;
}

.editor-preview pre > code {
  white-space: pre-wrap;
}

.CodeMirror-foldmarker {
  color: blue;
  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
  font-family: arial;
  line-height: .3;
  cursor: pointer;
}

.CodeMirror-foldgutter {
  width: .7em;
}

.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  cursor: pointer;
}

.CodeMirror-foldgutter-open:after {
  content: "\25BE";
}

.CodeMirror-foldgutter-folded:after {
  content: "\25B8";
}

[data-theme^="light"],
[data-theme] [data-theme^="light"] {
  --main-color: #000;
  --background-color: #fff;
  --box-color: lightgrey;
}

[data-theme^="dark"],
[data-theme] [data-theme^="dark"],
[data-theme="light-dark-sidebar"] nav {
  --blue-color: #1da1f2;
  --main-color: #fff;
  --background-color: #000;
  --sidebar-color: #333;
  --box-color: grey;
}

[data-theme^="dark"] .editor-toolbar i.separator {
  border-left: none;
}

.column .CodeMirror-widget {
  font-size: 24px;
}

.column .CodeMirror-foldmarker {
  color: #b086ff;
  text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;
  top: -2px;
  left: 4px;
  position: relative;
}
